<template>
	<!-- 外层容器 -->
	<view class="vip-sub-card">
		<!-- 卡片内容主体 -->
		<view class="vip-sub-card-content">

			<!-- 标题 + 折扣徽章 -->
			<view class="header">
				<text class="title">{{ config.name }}</text>
				<!-- 若 discount < 1 显示折扣提示 -->
				<view v-if="config.discount < 1" class="badge">
					<text>折扣 {{ formatDiscount(config.discount) }} 折</text>
				</view>
			</view>

			<!-- 简介 -->
			<text v-if="config.desc" class="desc">{{ config.desc }}</text>

			<!-- 特点/亮点 -->
			<view v-if="config.feature" class="feature">
				<text>亮点：{{ config.feature }}</text>
			</view>

			<!-- 状态信息，如果需要可用文字或标签标识0-禁用/1-正常 -->
			<view :class="config.status === 1 ? 'enabled' : 'disabled'" class="status">
				<text v-if="config.status === 1">状态：可使用</text>
				<text v-else>状态：禁用</text>
			</view>

			<!-- 价格/订阅周期/查询间隔等信息区域 -->
			<view class="price-info">
				<view class="price-row">
					<text class="price">
						￥{{ config.price }}
					</text>
					<text class="cycle"> / {{ parseCircle(config.circle) }}</text>
				</view>
				<view class="sub-info">
					<text>查询间隔：{{ config.query_limit }} 秒</text>
				</view>
			</view>

			<!-- 选择按钮 -->
			<view
					class="choose-button"
					@click="onChoose"
			>
				<text>选择</text>
			</view>

		</view>

		<!-- 发光动效遮罩，可自行调整是否需要 -->
		<view class="vip-sub-card-shine"></view>
	</view>
</template>

<script>
export default {
	name: 's-sub-card',
	props: {
		// 接收一条套餐数据
		config: {
			type: Object,
			required: true
		}
	},
	methods: {
		parseCircle(val) {
			switch (val) {
				case 0:
					return '天';
				case 1:
					return '月';
				case 2:
					return '年';
				default:
					return '未知周期';
			}
		},
		formatDiscount(val) {
			// 例如 0.9 => 9.0
			return (val * 10).toFixed(1);
		},
		onChoose() {
			// 触发父组件监听的事件，并把当前套餐数据传递回去
			this.$emit('choose', this.config);
		}
	}
}
</script>

<style scoped>
/* 卡片主容器 */
.vip-sub-card {
	position: relative;
	width: 80%;
	padding: 5%;
	margin: 5%;
	border-radius: 10px;
	background: #3E3A39; /* 深灰背景 */
	color: #fff; /* 白字 */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

/* 卡片点击反馈（H5中可用 :hover 或 JS交互等） */
.vip-sub-card:active {
	transform: scale(0.98);
	transition: transform .2s;
}

/* 卡片内容区域 */
.vip-sub-card-content {
	position: relative;
	z-index: 2; /* 让发光层在背后 */
}

/* 标题行 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.title {
	font-size: 18px;
	font-weight: bold;
	color: #F39800; /* 用橘色突出名称 */
}

.badge {
	background-color: #F39800;
	color: #3E3A39;
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 12px;
}

/* 简介 */
.desc {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 6px;
	color: #f1f1f1;
}

/* 亮点/特点 */
.feature {
	margin-bottom: 6px;
	color: #ffecb3;
	font-size: 13px;
}

/* 状态(可使用/禁用) */
.status {
	margin-bottom: 6px;
	font-size: 12px;
	border-radius: 4px;
	padding: 4px 6px;
	max-width: 120px;
}

.enabled {
	background-color: rgba(255, 255, 255, 0.1);
}

.disabled {
	background-color: rgba(255, 0, 0, 0.3);
}

/* 价格区域 */
.price-info {
	margin-top: 10px;
}

.price-row {
	display: flex;
	align-items: baseline;
	margin-bottom: 4px;
}

.price {
	font-size: 20px;
	font-weight: bold;
	color: #F39800;
}

.cycle {
	font-size: 14px;
	margin-left: 5px;
	color: #fff;
}

.sub-info {
	font-size: 12px;
	color: #fff;
}

/* 选择按钮 */
.choose-button {
	margin-top: 14px;
	padding: 8px;
	border-radius: 15px;
	background-color: #F39800;
	text-align: center;
	color: #3E3A39;
	font-size: 30rpx;
	font-weight: 600;
	/* 在H5里可以用: cursor: pointer; */
}

/* 发光动画遮罩层 (可选) */
.vip-sub-card-shine {
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
			to right,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.2) 100%
	);
	transform: skewX(-20deg);
	animation: shine 2.5s infinite linear;
	opacity: 0.6;
}

/* 闪光移动动画 */
@keyframes shine {
	0% {
		left: -70%;
	}
	50% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

/* 金色渐变边框，提升「VIP」质感，如果需要可取消注释 */
.vip-sub-card::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	padding: 2px;
	/*background: linear-gradient(45deg, #F39800, #fff, #F39800);*/
	/* 让背景只显示边框细线 */
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
</style>
